<template>
  <div
    class="addEdit-block"
    :style="{ padding: '30px 0 0 0' }"
    style="width: 100%"
  >
    <el-form
      :style="{ padding: '20px 0px 120px' }"
      class="add-update-preview"
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="140px"
    >
      <template>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-if="type != 'info'"
          label="登记编号"
          prop="dengjibianhao"
        >
          <el-input
            v-model="ruleForm.dengjibianhao"
            placeholder="登记编号"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-else-if="ruleForm.dengjibianhao"
          label="登记编号"
          prop="dengjibianhao"
        >
          <el-input
            v-model="ruleForm.dengjibianhao"
            placeholder="登记编号"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-if="type != 'info'"
          label="来访姓名"
          prop="laifangxingming"
        >
          <el-input
            v-model="ruleForm.laifangxingming"
            placeholder="来访姓名"
            clearable
            :readonly="ro.laifangxingming"
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-else
          class="input"
          label="来访姓名"
          prop="laifangxingming"
        >
          <el-input
            v-model="ruleForm.laifangxingming"
            placeholder="来访姓名"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-if="type != 'info'"
          label="身份证"
          prop="shenfenzheng"
        >
          <el-input
            v-model="ruleForm.shenfenzheng"
            placeholder="身份证"
            clearable
            :readonly="ro.shenfenzheng"
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-else
          class="input"
          label="身份证"
          prop="shenfenzheng"
        >
          <el-input
            v-model="ruleForm.shenfenzheng"
            placeholder="身份证"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-if="type != 'info'"
          label="联系手机"
          prop="lianxishouji"
        >
          <el-input
            v-model="ruleForm.lianxishouji"
            placeholder="联系手机"
            clearable
            :readonly="ro.lianxishouji"
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-else
          class="input"
          label="联系手机"
          prop="lianxishouji"
        >
          <el-input
            v-model="ruleForm.lianxishouji"
            placeholder="联系手机"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="date"
          v-if="type != 'info'"
          label="来访时间"
          prop="laifangshijian"
        >
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="ruleForm.laifangshijian"
            type="datetime"
            :readonly="ro.laifangshijian"
            placeholder="来访时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-else-if="ruleForm.laifangshijian"
          label="来访时间"
          prop="laifangshijian"
        >
          <el-input
            v-model="ruleForm.laifangshijian"
            placeholder="来访时间"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="date"
          v-if="type != 'info'"
          label="离开时间"
          prop="likaishijian"
        >
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="ruleForm.likaishijian"
            type="datetime"
            :readonly="ro.likaishijian"
            placeholder="离开时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-else-if="ruleForm.likaishijian"
          label="离开时间"
          prop="likaishijian"
        >
          <el-input
            v-model="ruleForm.likaishijian"
            placeholder="离开时间"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-if="type != 'info'"
          label="车牌号码"
          prop="chepaihaoma"
        >
          <el-input
            v-model="ruleForm.chepaihaoma"
            placeholder="车牌号码"
            clearable
            :readonly="ro.chepaihaoma"
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-else
          class="input"
          label="车牌号码"
          prop="chepaihaoma"
        >
          <el-input
            v-model="ruleForm.chepaihaoma"
            placeholder="车牌号码"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-if="type != 'info'"
          label="姓名"
          prop="xingming"
        >
          <el-input
            v-model="ruleForm.xingming"
            placeholder="姓名"
            clearable
            :readonly="ro.xingming"
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-else
          class="input"
          label="姓名"
          prop="xingming"
        >
          <el-input
            v-model="ruleForm.xingming"
            placeholder="姓名"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-if="type != 'info'"
          label="手机号码"
          prop="shoujihaoma"
        >
          <el-input
            v-model="ruleForm.shoujihaoma"
            placeholder="手机号码"
            clearable
            :readonly="ro.shoujihaoma"
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          v-else
          class="input"
          label="手机号码"
          prop="shoujihaoma"
        >
          <el-input
            v-model="ruleForm.shoujihaoma"
            placeholder="手机号码"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="date"
          v-if="type != 'info'"
          label="申请时间"
          prop="shenqingshijian"
        >
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="ruleForm.shenqingshijian"
            type="datetime"
            :readonly="ro.shenqingshijian"
            placeholder="申请时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          :style="{
            width: '100%',
            margin: '0 0 20px 0',
            display: 'inline-block',
          }"
          class="input"
          v-else-if="ruleForm.shenqingshijian"
          label="申请时间"
          prop="shenqingshijian"
        >
          <el-input
            v-model="ruleForm.shenqingshijian"
            placeholder="申请时间"
            readonly
          ></el-input>
        </el-form-item>
      </template>
      <el-form-item
        :style="{
          width: '100%',
          margin: '0 0 20px 0',
          display: 'inline-block',
        }"
        class="textarea"
        v-if="type != 'info'"
        label="来访事由"
        prop="laifangshiyou"
      >
        <el-input
          style="min-width: 200px; max-width: 600px"
          type="textarea"
          :rows="8"
          placeholder="来访事由"
          v-model="ruleForm.laifangshiyou"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        :style="{
          width: '100%',
          margin: '0 0 20px 0',
          display: 'inline-block',
        }"
        v-else-if="ruleForm.laifangshiyou"
        label="来访事由"
        prop="laifangshiyou"
      >
        <span
          :style="{
            fontSize: '14px',
            lineHeight: '40px',
            color: '#333',
            fontWeight: '500',
            display: 'inline-block',
          }"
          >{{ ruleForm.laifangshiyou }}</span
        >
      </el-form-item>
      <el-form-item :style="{ padding: '0', margin: '0' }" class="btn">
        <el-button
          :style="{
            border: '0',
            cursor: 'pointer',
            padding: '0',
            margin: '0 20px 0 0',
            outline: 'none',
            color: 'rgba(255, 255, 255, 1)',
            borderRadius: '40px',
            background: 'rgba(27, 167, 166, 1)',
            width: '128px',
            lineHeight: '40px',
            fontSize: '14px',
            height: '40px',
          }"
          v-if="type != 'info'"
          type="primary"
          class="btn-success"
          @click="onSubmit"
          >提交</el-button
        >
        <el-button
          :style="{
            border: '1px solid rgba(27, 167, 166, 1)',
            cursor: 'pointer',
            padding: '0',
            margin: '0',
            outline: 'none',
            color: 'rgba(27, 167, 166, 1)',
            borderRadius: '40px',
            background: 'rgba(255, 255, 255, 1)',
            width: '128px',
            lineHeight: '40px',
            fontSize: '14px',
            height: '40px',
          }"
          v-if="type != 'info'"
          class="btn-close"
          @click="back()"
          >取消</el-button
        >
        <el-button
          :style="{
            border: '1px solid rgba(27, 167, 166, 1)',
            cursor: 'pointer',
            padding: '0',
            margin: '0',
            outline: 'none',
            color: 'rgba(27, 167, 166, 1)',
            borderRadius: '40px',
            background: 'rgba(255, 255, 255, 1)',
            width: '128px',
            lineHeight: '40px',
            fontSize: '14px',
            height: '40px',
          }"
          v-if="type == 'info'"
          class="btn-close"
          @click="back()"
          >返回</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import {
  isNumber,
  isIntNumer,
  isEmail,
  isPhone,
  isMobile,
  isURL,
  checkIdCard,
} from '@/utils/validate'
export default {
  data() {
    let self = this
    var validateIdCard = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!checkIdCard(value)) {
        callback(new Error('请输入正确的身份证号码'))
      } else {
        callback()
      }
    }
    var validateUrl = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!isURL(value)) {
        callback(new Error('请输入正确的URL地址'))
      } else {
        callback()
      }
    }
    var validateMobile = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!isMobile(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!isPhone(value)) {
        callback(new Error('请输入正确的电话号码'))
      } else {
        callback()
      }
    }
    var validateEmail = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!isEmail(value)) {
        callback(new Error('请输入正确的邮箱地址'))
      } else {
        callback()
      }
    }
    var validateNumber = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!isNumber(value)) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }
    var validateIntNumber = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!isIntNumer(value)) {
        callback(new Error('请输入整数'))
      } else {
        callback()
      }
    }
    return {
      id: '',
      type: '',

      ro: {
        dengjibianhao: false,
        laifangxingming: false,
        shenfenzheng: false,
        lianxishouji: false,
        laifangshijian: false,
        likaishijian: false,
        chepaihaoma: false,
        laifangshiyou: false,
        xingming: false,
        shoujihaoma: false,
        shenqingshijian: false,
        sfsh: false,
        shhf: false,
        userid: false,
      },

      ruleForm: {
        dengjibianhao: this.getUUID(),
        laifangxingming: '',
        shenfenzheng: '',
        lianxishouji: '',
        laifangshijian: '',
        likaishijian: '',
        chepaihaoma: '',
        laifangshiyou: '',
        xingming: '',
        shoujihaoma: '',
        shenqingshijian: '',
        shhf: '',
        userid: '',
      },

      rules: {
        dengjibianhao: [],
        laifangxingming: [
          { required: true, message: '来访姓名不能为空', trigger: 'blur' },
        ],
        shenfenzheng: [{ validator: validateIdCard, trigger: 'blur' }],
        lianxishouji: [{ validator: validateMobile, trigger: 'blur' }],
        laifangshijian: [],
        likaishijian: [],
        chepaihaoma: [],
        laifangshiyou: [],
        xingming: [],
        shoujihaoma: [],
        shenqingshijian: [],
        sfsh: [],
        shhf: [],
        userid: [],
      },
    }
  },
  props: ['parent'],
  computed: {},
  components: {},
  created() {
    this.ruleForm.shenqingshijian = this.getCurDateTime()
  },
  methods: {
    // 下载
    download(file) {
      window.open(`${file}`)
    },
    // 初始化
    init(id, type) {
      if (id) {
        this.id = id
        this.type = type
      }
      if (this.type == 'info' || this.type == 'else') {
        this.info(id)
      } else if (this.type == 'logistics') {
        this.logistics = false
        this.info(id)
      } else if (this.type == 'cross') {
        var obj = this.$storage.getObj('crossObj')
        for (var o in obj) {
          if (o == 'dengjibianhao') {
            this.ruleForm.dengjibianhao = obj[o]
            this.ro.dengjibianhao = true
            continue
          }
          if (o == 'laifangxingming') {
            this.ruleForm.laifangxingming = obj[o]
            this.ro.laifangxingming = true
            continue
          }
          if (o == 'shenfenzheng') {
            this.ruleForm.shenfenzheng = obj[o]
            this.ro.shenfenzheng = true
            continue
          }
          if (o == 'lianxishouji') {
            this.ruleForm.lianxishouji = obj[o]
            this.ro.lianxishouji = true
            continue
          }
          if (o == 'laifangshijian') {
            this.ruleForm.laifangshijian = obj[o]
            this.ro.laifangshijian = true
            continue
          }
          if (o == 'likaishijian') {
            this.ruleForm.likaishijian = obj[o]
            this.ro.likaishijian = true
            continue
          }
          if (o == 'chepaihaoma') {
            this.ruleForm.chepaihaoma = obj[o]
            this.ro.chepaihaoma = true
            continue
          }
          if (o == 'laifangshiyou') {
            this.ruleForm.laifangshiyou = obj[o]
            this.ro.laifangshiyou = true
            continue
          }
          if (o == 'xingming') {
            this.ruleForm.xingming = obj[o]
            this.ro.xingming = true
            continue
          }
          if (o == 'shoujihaoma') {
            this.ruleForm.shoujihaoma = obj[o]
            this.ro.shoujihaoma = true
            continue
          }
          if (o == 'shenqingshijian') {
            this.ruleForm.shenqingshijian = obj[o]
            this.ro.shenqingshijian = true
            continue
          }
          if (o == 'userid') {
            this.ruleForm.userid = obj[o]
            this.ro.userid = true
            continue
          }
        }
      }

      // 获取用户信息
      this.$http({
        url: `${this.$storage.get('sessionTable')}/session`,
        method: 'get',
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var json = data.data
          if (
            ((json.xingming != '' && json.xingming) || json.xingming == 0) &&
            this.$storage.get('role') != '管理员'
          ) {
            this.ruleForm.xingming = json.xingming
            this.ro.xingming = true
          }
          if (
            ((json.shoujihaoma != '' && json.shoujihaoma) ||
              json.shoujihaoma == 0) &&
            this.$storage.get('role') != '管理员'
          ) {
            this.ruleForm.shoujihaoma = json.shoujihaoma
            this.ro.shoujihaoma = true
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 多级联动参数

    info(id) {
      this.$http({
        url: `fangkexinxi/info/${id}`,
        method: 'get',
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.ruleForm = data.data
          //解决前台上传图片后台不显示的问题
          let reg = new RegExp('../../../upload', 'g') //g代表全部
        } else {
          this.$message.error(data.msg)
        }
      })
    },

    // 提交
    onSubmit() {
      var objcross = this.$storage.getObj('crossObj')

      //更新跨表属性
      var crossuserid
      var crossrefid
      var crossoptnum
      if (this.type == 'cross') {
        var statusColumnName = this.$storage.get('statusColumnName')
        var statusColumnValue = this.$storage.get('statusColumnValue')
        if (statusColumnName != '') {
          var obj = this.$storage.getObj('crossObj')
          if (statusColumnName && !statusColumnName.startsWith('[')) {
            for (var o in obj) {
              if (o == statusColumnName) {
                obj[o] = statusColumnValue
              }
            }
            var table = this.$storage.get('crossTable')
            this.$http({
              url: `${table}/update`,
              method: 'post',
              data: obj,
            }).then(({ data }) => {})
          } else {
            crossuserid = this.$storage.get('userid')
            crossrefid = obj['id']
            crossoptnum = this.$storage.get('statusColumnName')
            crossoptnum = crossoptnum.replace(/\[/, '').replace(/\]/, '')
          }
        }
      }
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (crossrefid && crossuserid) {
            this.ruleForm.crossuserid = crossuserid
            this.ruleForm.crossrefid = crossrefid
            let params = {
              page: 1,
              limit: 10,
              crossuserid: this.ruleForm.crossuserid,
              crossrefid: this.ruleForm.crossrefid,
            }
            this.$http({
              url: 'fangkexinxi/page',
              method: 'get',
              params: params,
            }).then(({ data }) => {
              if (data && data.code === 0) {
                if (data.data.total >= crossoptnum) {
                  this.$message.error(this.$storage.get('tips'))
                  return false
                } else {
                  this.$http({
                    url: `fangkexinxi/${!this.ruleForm.id ? 'save' : 'update'}`,
                    method: 'post',
                    data: this.ruleForm,
                  }).then(({ data }) => {
                    if (data && data.code === 0) {
                      this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                          this.parent.showFlag = true
                          this.parent.addOrUpdateFlag = false
                          this.parent.fangkexinxiCrossAddOrUpdateFlag = false
                          this.parent.search()
                          this.parent.contentStyleChange()
                        },
                      })
                    } else {
                      this.$message.error(data.msg)
                    }
                  })
                }
              } else {
              }
            })
          } else {
            this.$http({
              url: `fangkexinxi/${!this.ruleForm.id ? 'save' : 'update'}`,
              method: 'post',
              data: this.ruleForm,
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.parent.showFlag = true
                    this.parent.addOrUpdateFlag = false
                    this.parent.fangkexinxiCrossAddOrUpdateFlag = false
                    this.parent.search()
                    this.parent.contentStyleChange()
                  },
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        }
      })
    },
    // 获取uuid
    getUUID() {
      return new Date().getTime()
    },
    // 返回
    back() {
      this.parent.showFlag = true
      this.parent.addOrUpdateFlag = false
      this.parent.fangkexinxiCrossAddOrUpdateFlag = false
      this.parent.contentStyleChange()
    },
  },
}
</script>
<style lang="scss" scoped>
.amap-wrapper {
  width: 100%;
  height: 500px;
}

.search-box {
  position: absolute;
}

.el-date-editor.el-input {
  width: auto;
}

.add-update-preview .el-form-item /deep/ .el-form-item__label {
  padding: 0 10px 0 0;
  color: #333;
  width: 140px;
  font-size: 14px;
  line-height: 40px;
  text-align: right;
}

.add-update-preview .el-form-item /deep/ .el-form-item__content {
  margin-left: 140px;
}

.add-update-preview .el-input /deep/ .el-input__inner {
  border: 2px solid #797979;
  border-radius: 4px;
  padding: 0 12px;
  outline: none;
  color: #333;
  width: 300px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview .el-select /deep/ .el-input__inner {
  border: 2px solid #797979;
  border-radius: 4px;
  padding: 0 10px;
  outline: none;
  color: #333;
  width: 200px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview .el-date-editor /deep/ .el-input__inner {
  border: 2px solid #797979;
  border-radius: 4px;
  padding: 0 10px 0 30px;
  outline: none;
  color: #333;
  width: 200px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview /deep/ .el-upload--picture-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  line-height: initial;
  vertical-align: middle;
}

.add-update-preview /deep/ .upload .upload-img {
  border: 2px dashed #797979;
  cursor: pointer;
  border-radius: 6px;
  color: #797979;
  width: 150px;
  font-size: 32px;
  line-height: 150px;
  text-align: center;
  height: 150px;
}

.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
  border: 2px dashed #797979;
  cursor: pointer;
  border-radius: 6px;
  color: #797979;
  width: 150px;
  font-size: 32px;
  line-height: 150px;
  text-align: center;
  height: 150px;
}

.add-update-preview /deep/ .el-upload .el-icon-plus {
  border: 2px dashed #797979;
  cursor: pointer;
  border-radius: 6px;
  color: #797979;
  width: 150px;
  font-size: 32px;
  line-height: 150px;
  text-align: center;
  height: 150px;
}

.add-update-preview .el-textarea /deep/ .el-textarea__inner {
  border: 2px solid #797979;
  border-radius: 4px;
  padding: 12px;
  outline: none;
  color: #333;
  width: 400px;
  font-size: 14px;
  height: 120px;
}
</style>
